<template>
    <div>
        <el-header class="header">
            <h3>设备历史数据</h3>
        </el-header>
        <el-form inline>
            <el-form-item label="设备分类:">
                <el-input></el-input>
                <!-- Vue2 => v-model :value 和 @input 的简写 -->
                <!-- <el-select ></el-select> -->
            </el-form-item>
            <el-form-item label="发布状态:">
                <el-input></el-input>
                <!-- <el-select placeholder="请选择相关内容">
                    <el-option label="区域一" value=""></el-option>
                    <el-option label="区域二" value=""></el-option>
                </el-select> -->
            </el-form-item>
            <el-form-item>
                <el-button  type="primary">搜索</el-button>
                <el-button >重置</el-button>
                <el-button>添加</el-button>
            </el-form-item>
        </el-form>
        <div class="form">
            <el-table
            :data="tableData"
            style="width: 100%"
            max-height="100vh">
            <el-table-column
            fixed
            prop="id"
            label="id"
            >
            </el-table-column>
            <el-table-column
            prop="client_id"
            label="设备ID"
            >
            </el-table-column>
            <el-table-column
            prop="sender"
            label="设备名"
            >
            </el-table-column>
            <el-table-column
            prop="peer_host"
            label="设备IP"
            >
            </el-table-column>
            <el-table-column
            prop="angular_velocity_x"
            label="角速度x"
            >
            </el-table-column>
            <el-table-column
            prop="angular_velocity_y"
            label="角速度y"
            >
            </el-table-column>
            <el-table-column
            prop="angular_velocity_z"
            label="角速度z"
            >
            </el-table-column>
            <el-table-column
            prop="acceleration_x"
            label="加速度x"
            >
            </el-table-column>
            <el-table-column
            prop="acceleration_y"
            label="加速度y"
            >
            </el-table-column>
            <el-table-column
            prop="acceleration_z"
            label="加速度z"
            >
            </el-table-column>
            <el-table-column
            prop="timestamp"
            label="时间戳"
            >
            </el-table-column>
            <el-table-column
            fixed="right"
            label="操作"
            >
            <template slot-scope="scope">
                <el-button
                @click.native.prevent="deleteRow(scope.$index, tableData)"
                type="text"
                size="small">
                移除
                </el-button>
            </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="block">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage1"
            :page-size="pageSize"
            layout="jumper, total, sizes, prev, pager, next"
            :total="total"
            style="margin-top: 20px; justify-content: flex-end;"
            >
            </el-pagination>
        </div>
    
    
    </div>

</template>
<script>


export default {
    props:{
        total:{
            type:Number,
            default:100
        },
        pageSize:{
            type:Number,
            default:10
        }

    },

    methods: {
      deleteRow(index, rows) {
        rows.splice(index, 1);
      },
      //分页逻辑
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
      //-------------------------------
    },
    data() {
      return {
      
        currentPage1: 1,
        tableData: [
        {
          id: '1',
          client_id: '001',
          sender:'设备1号',
          peer_host: '001',
          angular_velocity_x: '2000°/s',
          angular_velocity_y: '2000°/s',
          angular_velocity_z: '2000°/s',
          acceleration_x: '20g',
          acceleration_y: '20g',
          acceleration_z: '20g',
          timestamp: '2024.04.01',

        }, {
          id: '2',
          client_id: '002',
          sender:'设备2号',
          peer_host: '002',
          angular_velocity_x: '2000°/s',
          angular_velocity_y: '2000°/s',
          angular_velocity_z: '2000°/s',
          acceleration_x: '20g',
          acceleration_y: '20g',
          acceleration_z: '20g',
          timestamp: '2024.04.01',
        }, {
          id: '3',
          client_id: '003',
          sender:'设备3号',
          peer_host: '003',
          angular_velocity_x: '2000°/s',
          angular_velocity_y: '2000°/s',
          angular_velocity_z: '2000°/s',
          acceleration_x: '20g',
          acceleration_y: '20g',
          acceleration_z: '20g',
          timestamp: '2024.04.01',
        }, {
          id: '4',
          client_id: '004',
          sender:'设备4号',
          peer_host: '004',
          angular_velocity_x: '2000°/s',
          angular_velocity_y: '2000°/s',
          angular_velocity_z: '2000°/s',
          acceleration_x: '20g',
          acceleration_y: '20g',
          acceleration_z: '20g',
          timestamp: '2024.04.01',
        }, {
          id: '5',
          client_id: '005',
          sender:'设备5号',
          peer_host: '005',
          angular_velocity_x: '2000°/s',
          angular_velocity_y: '2000°/s',
          angular_velocity_z: '2000°/s',
          acceleration_x: '20g',
          acceleration_y: '20g',
          acceleration_z: '20g',
          timestamp: '2024.04.01',
        }, {
          id: '6',
          client_id: '006',
          sender:'设备6号',
          peer_host: '006',
          angular_velocity_x: '2000°/s',
          angular_velocity_y: '2000°/s',
          angular_velocity_z: '2000°/s',
          acceleration_x: '20g',
          acceleration_y: '20g',
          acceleration_z: '20g',
          timestamp: '2024.04.01',
        }, {
          id: '7',
          client_id: '007',
          sender:'设备7号',
          peer_host: '007',
          angular_velocity_x: '2000°/s',
          angular_velocity_y: '2000°/s',
          angular_velocity_z: '2000°/s',
          acceleration_x: '20g',
          acceleration_y: '20g',
          acceleration_z: '20g',
          timestamp: '2024.04.01',
        }]
      }
    }
  }

</script>
<style lang="less" scoped>
.header{
    display: flex;

}
.right-button{

}
</style>